<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!doctype html>
<html class="no-js">
	<head>
		<%@include file="../common/head.jspf"%>
	</head>
	<body>
		<%@include file="../common/header.jspf"%>

		<div class="am-cf admin-main">
			<%@include file="../common/sidebar.jspf"%>

			<!-- content start -->
			<div class="admin-content">
				<div class="admin-content-body">
					<div class="am-cf am-padding am-padding-bottom-0">
						<div class="am-fl am-cf">
							<strong class="am-text-primary am-text-lg">表格</strong> /
							<small>Table</small>
						</div>
					</div>

					<hr>

					<div class="am-g">
						<div class="am-u-sm-12 am-u-md-6">
							<div class="am-btn-toolbar">
								<div class="am-btn-group am-btn-group-xs">
									<button type="button" id="add" class="am-btn am-btn-default">
										<span class="am-icon-plus"></span> 新增
									</button>
								</div>
							</div>
						</div>
					</div>

					<div class="am-g">
						<div class="am-u-sm-12">
							<form class="am-form">
								<table
									class="am-table am-table-striped am-table-hover table-main" id="table">
									<thead>
										<tr>
											<th class="table-id">
												ID
											</th>
											<th class="table-title">
												楼层
											</th>
											<th class="table-type">
												数量
											</th>
											<th class="table-author am-hide-sm-only">
												已使用
											</th>
											<th class="table-set">
												未使用
											</th>
											<th class="table-set">
												操作
											</th>
										</tr>
									</thead>
									<tbody></tbody>
								</table>
							</form>
						</div>

					</div>
				</div>
				<%@include file="../common/footer.jspf"%>
			</div>
			<!-- content end -->
		</div>
				  
		<div id="operationHTML" style="display: none">
		    <div class="am-btn-toolbar">
		        <div class="am-btn-group am-btn-group-xs">
		            <button type="button" class="am-btn am-btn-default am-btn-xs am-text-secondary index" data-id="#id" data-type="edit"><span class="am-icon-pencil-square-o"></span> 编辑</button>
		            <%--<button type="button" class="am-btn am-btn-default am-btn-xs am-text-danger am-hide-sm-only index" data-id="#id" data-type="delete"><span class="am-icon-trash-o"></span> 删除</button>
		        --%></div>
		    </div>
		</div>
		<div class="am-modal am-modal-confirm" tabindex="-1" id="my-confirm">
		    <div class="am-modal-dialog">
		        <div class="am-modal-hd">Amaze UI</div>
		        <div class="am-modal-bd">
		            	你，确定要删除这条记录吗？
		        </div>
		        <div class="am-modal-footer">
		            <span class="am-modal-btn" data-am-modal-cancel>取消</span>
		            <span class="am-modal-btn" data-am-modal-confirm>确定</span>
		        </div>
		    </div>
		</div>
		<script type="text/javascript">
			$(function(){
				var table = $("#table").dataTable({
			        ajax: '/admin/getFloorList',
			        columnDefs: [{
			                targets: 0,
			                data: function (data, type, set, meta) {
			                    return data.id;
			                }
			            }, {
			                targets: 1,
			                data: function (data, type, set, meta) {
			                    return data.floor;
			                }
			            }, {
			                targets: 2,
			                data: function (data, type, set, meta) {
			                    return data.count;
			                }
			            }, {
			                targets: 3,
			                data: function (data, type, set, meta) {
			                    return data.used;
			                }
			            }, {
			                targets: 4,
			                data: function (data, type, set, meta) {
			                    return data.free;
			                }
			            }, {
			                targets: 5,
			                data: function (data, type, set, meta) {
			                    return $("#operationHTML").html().replace(/#id/g, data.id);
			                }
			            }],
			        order: [],
			        dom: 'rtip',
			        drawCallback: function () {
			            $(".index").off("click").on("click", function (e) {
			                e.stopPropagation();
			                var id = $(this).data("id");
			                var type = $(this).data("type");
			                if (type === "edit") {
			                    location.href = "/admin/editFloor?id=" + id;
			                } else {
			                    $('#my-confirm').modal({
			                        relatedTarget: this,
			                        onConfirm: function (options) {
			                            deleteItem(id);
			                        },
			                        // closeOnConfirm: false,
			                        onCancel: function () {
			
			                        }
			                    });
			                }
			            });
			        }
			    });
				var deleteItem = function (id) {
			        $.post("delete.html", {id: id}, function (e) {
			            if (e) {
			                table._fnAjaxUpdate();
			            } else {
			                alert("警告", "删除失败");
			            }
			        });
			    };
			    $("#parking").addClass("am-in");
			    $("#add").on("click", function(){
			    	location.href = "/admin/editFloor";
			    });
			});
		</script>
	</body>
</html>

